<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    .box {
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }

    .box input {
        width: 370px;
        height: 30px;
        border: 0;
        /* 当输入框获取焦点时, 外边框不显示 */
        outline: none;
    }

    .box img {
        position: absolute;
        top: 5px;
        right: 2px;
        width: 24px;
    }

</style>
<body>

<div class="box">

    <label for="search">
        <img alt="" id="eye" onclick="displayInput()" src="../images/close.png">
    </label>
    <input id="search" name="" placeholder="搜索" type="text">
</div>

<script>
    const input = document.querySelector('#search');
    const eye = document.querySelector('#eye');
    let closeFlag = true;

    // 1.核心思路: 检测用户是否按下s键, 如果按下s键, 就把光标定位到搜索框里面
    // 2.使用键盘事件对象里面的keyCode判断用户按下了是否是s键
    // 3.搜索框获得焦点: 使用js里面的focus()方法   input.focus()
    document.addEventListener('keyup', function (e) {
        if (e.keyCode === 83) {
            console.log(e.keyCode)
            input.focus();
        }

    })


    function displayInput() {
        if (closeFlag) {
            input.type = 'text';
            eye.src = '../images/open.png';
        } else {
            input.type = 'password';
            eye.src = '../images/close.png';
        }
        closeFlag = !closeFlag;
    }
</script>
</body>
</html>
